<template>
    <div class="form">
        <el-form label-width="80" :rules="userRules" ref="userRef" :model="userForm">
            <el-form-item label="用户姓名" prop="name">
                <el-input v-model="userForm.name" placeholder="请输入用户姓名"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="certificatesType">
                <el-select v-model="userForm.certificatesType" style="width:300px" placeholder="请选择证件类型" clearable>
                    <el-option :value="item.value" :label="item.name" v-for="(item, index) in cardType"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certificatesNo">
                <el-input v-model="userForm.certificatesNo" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="上传证件" prop="certificatesUrl">
                <el-upload action="/api/oss/file/fileUpload?fileHost=userAuah" list-type="picture-card" :limit="2"
                    :on-exceed="exceedHandle" :on-success="successHandle" :on-preview="preciewHandle"
                    :on-remove="removeHandle" ref="uploadRef">
                    <img width="100%" src="../../../assets/images/auth_example.png" alt="">
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img w-full alt="Preview Image" :src="userForm.certificatesUrl" width="100%" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">提交</el-button>
                <el-button type="info" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { getUserAuthAPI } from '@/api/user';
import { AuthParams } from '@/api/user/type';
import { ElMessage, FormRules, UploadFile, UploadFiles } from 'element-plus';
import { reactive, ref } from 'vue';

defineProps(['cardType'])

let userForm = ref<AuthParams>({
    certificatesNo: "",
    certificatesType: "",
    certificatesUrl: "",
    name: ""
})
let userRef = ref()
let uploadRef = ref()
let dialogVisible = ref<boolean>(false)

//自定义校验规则姓名方法
const validatorName = (rule: any, value: any, callBack: any) => {
    //rule:即为当前校验字段的校验规则对象
    const reg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的用户姓名"));
    }
};

//证件号码的校验方法
const validatorNo = (rule: any, value: any, callBack: any) => {
    let sfz = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;
    let hkb = /^\d{9}$/;
    if (sfz.test(value) || hkb.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的身份证或者户口本的号码"));
    }
};
//证件照图片的
const validatorUrl = (rule: any, value: any, callBack: any) => {
    if (value.length) {
        callBack();
    } else {
        callBack(new Error("请上传证件照图片"));
    }
};
const userRules = reactive<FormRules<AuthParams>>({
    name: {
        required: true,
        validator: validatorName,
    },
    certificatesType: {
        required: true,
        message: '请选择证件类型',
        trigger: 'change',
    },
    certificatesNo: {
        required: true,
        validator: validatorNo,
    },
    certificatesUrl: {
        required: true,
        validator: validatorUrl,
    },
})

const exceedHandle = () => {
    ElMessage({
        type: 'warning',
        message: '最多只能上传两张图片'
    })
}
const successHandle = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    userForm.value.certificatesUrl = response.data
}
const preciewHandle = () => {
    dialogVisible.value = true
}
const removeHandle = () => {
    userForm.value.certificatesUrl = ''
}
let $emit = defineEmits(['getUserInfo'])
const submitForm = async () => {
    await userRef.value.validate()
    let res: any = await getUserAuthAPI(userForm.value)
    if (res.code == 200) {
        ElMessage({
            type: 'success',
            message: '提交认证成功！'
        })
        $emit('getUserInfo')
    } else {
        ElMessage({
            type: 'error',
            message: '提交认证失败！'
        })
    }
}
const reset = () => {
    Object.assign(userForm, {
        certificatesNo: "",
        certificatesType: "",
        certificatesUrl: "",
        name: ""
    })
    uploadRef.value.clearFiles()
    userRef.value.resetFields()
}
</script>

<style scoped lang="scss">
.form {
    width: 420px;
    display: flex;
    justify-content: center;
    margin: 80px auto 0 auto;

    ::v-deep .el-input {
        --el-input-width: 300px;
    }

    ::v-deep .el-form-item__label {
        color: #999;
    }

    ::v-deep .el-form-item {
        margin-bottom: 23px;
    }
}
</style>